(function(){
	angular.module('app').directive('tooltip', ['$document','$compile','$timeout',function ($document,$compile,$timeout) {

		

		return {
			restrict: 'A',
			scope:{
				tooltipSwitch: '='
			},
			link: function (scope, $el, $attr) {

				console.log('tooltip directive');

				var template = '<div class="tooltip"  ng-style="myStyle"><div class="content" ng-bind-html="template"></div></div>';

				console.log($attr);


				scope.template = $attr.tooltipTeamplate;

				scope.myStyle = {'background-color':'blue'};


				template = $compile(template)(scope);				

				_init();


				function _init(){
					if(typeof $attr.tooltipSwitch === "undefined"){

						angular.element($el).bind('mouseenter',mouseenter);

						angular.element($el).bind('mouseleave',mouseleave);


					}else{

						scope.$watch('tooltipSwitch',function(oldValue,newValue){

							console.log("oldValue: "+oldValue+"   newValue:" +newValue);

							if(newValue && newValue !== null){

							}

						});
					}
				}


				

				function mouseenter(e){
					
					auto();
					angular.element(document.body).append(template);

				}
				function mouseleave(){

					// angular.element(template).remove();
				}

				function auto(){

					var top = parseInt($($el).offset().top);
					var left = parseInt($($el).offset().left);

					var right = parseInt($($el).offset().left+ $($el).width());

					var bottom = parseInt($($el).offset().top + $(el).height());

					console.log($($el).offset().top);
					console.log($($el).offset().left);

					$timeout(function(){
						scope.myStyle.top = parseInt($($el).offset().top + $($el).innerHeight()/2)+"px";
						scope.myStyle.left = parseInt($($el).offset().left + $($el).width()+10)+"px";

					},0);


				}



				
			}
		};
	}])
})();